<template>
  <Header/>
  <div class="main box_center cf mb50">
    <div class="channelWrap channelBookInfo cf">
      <div class="bookCover cf">
        <a class="book_cover">
          <img
              id="bookCover"
              class="cover"
              :src="`${book.picUrl}`"
              :alt="book.bookName"
          /></a>
        <!--        :src="`${imgBaseUrl}` + `${book.picUrl}`"-->
        <div class="book_info">
          <div class="tit">
            <h1>{{ book.bookName }}</h1>
            <!--<i class="vip_b">VIP</i>--><a class="author">{{
              book.authorName
            }}</a>
          </div>
          <ul class="list">
            <li>
              <span class="item"
              >类别：<em>{{ book.categoryName }}</em></span
              >
              <span class="item"
              >状态：<em>{{
                  book.bookStatus == 0 ? "连载中" : "已完结"
                }}</em></span
              >
              <span class="item"
              >总点击：<em id="cTotal">{{ book.visitCount }}</em></span
              >
              <span class="item"
              >总字数：<em>{{ book.wordCount }}</em></span
              >
            </li>
          </ul>
          <div class="intro_txt">
            <p style="white-space:break-spaces" v-html="book.bookDesc"></p>
            <a class="icon_hide" href="javascript:void(0)" onclick=""
            ><i></i>收起</a
            >
            <a class="icon_show" href="javascript:void(0)" onclick=""
            ><i></i>展开</a
            >
          </div>
          <div class="btns" id="optBtn">
            <a
                href="javascript:void(0)"
                @click="bookContent()"
                class="btn_ora"
            >点击阅读</a
            >
            <!--
            <span id="cFavs"
              ><a
                href="javascript:void(0);"
                class="btn_ora_white btn_addsj"
                onclick="javascript:BookDetail.AddFavorites(37,0,0);"
                >加入书架</a
              >
            </span>-->
          </div>
        </div>
      </div>
    </div>

    <div class="channelBookContent cf">
      <!--left start-->
      <div class="wrap_left fl">
        <div class="wrap_bg">
          <!--章节目录 start-->
          <div class="pad20_nobt">
            <div class="bookChapter" style="font-size: 1.2em">
              <div class="book_tit">
                <div class="fl">
                  <h3>最新章节</h3>
                  <span id="bookIndexCount"
                  >({{ chapterAbout.chapterTotal }}章)</span
                  >
                </div>
                <a
                    class="fr"
                    @click="chapterList(book.id)"
                    href="javascript:void(0)"
                >全部目录</a
                >
              </div>
              <ul class="list cf">
                <li>
                  <span class="fl font16">
                    <a
                        @click="
                        bookContent(
                          chapterAbout.chapterInfo.bookId,
                          chapterAbout.chapterInfo.id
                        )
                      "
                        href="javascript:void(0)"
                        v-if="chapterAbout.chapterInfo"
                    >【{{ chapterAbout.chapterInfo.chapterName }}】</a
                    ></span>
                  <span class="black9 fr" v-if="chapterAbout.chapterInfo">
                    更新时间：{{
                      chapterAbout.chapterInfo.chapterUpdateTime
                    }}</span>
                </li>
                <li class="zj_yl" id="lastBookContent">
                  <!--go-->
                  <span v-html="`${chapterAbout.contentSummary}` + '...'"></span>
                </li>
                <!--此处是该章节预览，截取最前面的42个字-->
              </ul>
            </div>
          </div>
          <!--章节目录 end-->

        </div>
      </div>
      <!--left end-->

      <!--right start-->
      <div class="wrap_right fr">
        <!--作者专栏s-->
        <div class="wrap_inner author_info mb20">
          <div class="author_head cf">
            <a href="javascript:void(0);" class="head">
              <img :src="author_head" alt="作者头像" id="authorLogoImg"/>
            </a>
            <div class="msg">
              <span class="icon_qyzz">签约作家</span>
              <h4>
                <a href="javascript:searchByK('冷漠的天蝎')">
                  {{book.authorName}}
                </a>
              </h4>
            </div>
          </div>
          <div class="author_intro cf">
            <h4>作者有话说</h4>
            <div class="intro_txt" id="authorNote">
              亲亲们，你们的支持是我最大的动力！求点击、求推荐、求书评哦！
            </div>
          </div>
        </div>

        <div id="RelateBookOther" class="wrap_inner wrap_right_cont mb20">
          <div class="title cf">
            <h3 class="on">同类推荐</h3>
          </div>
          <div class="tj_bar">
            <ul id="recBookList">
              <li v-for="(item, index) in books" :key="index">
                <div class="book_intro">
                  <div class="cover">
                    <a href="javascript:void(0)" @click="bookDetail(item.id)"
                    ><img
                        :id="`${index}`"
                        :src="`${item.picUrl}`"
                        :alt="item.bookName"
                    /></a>
                  </div>
                  <div class="dec">
                    <a href="javascript:void(0)" @click="bookDetail(item.id)">{{
                        item.bookName
                      }}</a>
                    <a
                        class="txt"
                        href="javascript:void(0)"
                        @click="bookDetail(item.id)"
                        v-html="item.bookDesc"
                    ></a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--right end-->
    </div>
<!--    <div style="width: 100%;background-color: #7f7f7f;height: 10vh">hello，world</div>-->
  </div>

  <Footer/>
</template>

<script>
import "@/assets/styles/book.css";
import man from "@/assets/images/man.png";
import {reactive, toRefs, onMounted, onUpdated} from "vue";
import {ElMessage} from "element-plus";
import {useRouter, useRoute} from "vue-router";
import {
  getBookById,
  getLastChapterAbout,
  listRecBooks,
  listNewestComments,
} from "@/api/book";
import {comment, deleteComment, updateComment} from "@/api/user";
import {getUid} from "@/utils/auth";
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
import author_head from "@/assets/images/author_head.png";
import no_comment from "@/assets/images/no_comment.png";
import {goToAnchor} from "@/utils";

export default {
  name: "book",
  components: {
    Header,
    Footer,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      uid: getUid(),
      book: {},
      books: [],
      chapterAbout: {},
      commentContent: "",
      newestComments: {},
      imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
      dialogUpdateCommentFormVisible: false,
      commentId: "",
      updateComment: "",
    });
    onMounted(() => {
      const bookId = route.params.id;
      loadBook(bookId);
      // loadRecBooks(bookId);
      loadLastChapterAbout(bookId);
      // loadNewestComments(bookId);
    });

    onUpdated(() => {
      console.log("onUpdated==========================");
      for (let i = 0; i < state.books.length; i++) {
        document
            .getElementById("bookCover" + i)
            .setAttribute("onerror", "this.src='default.gif';this.onerror=null");
      }
    });

    const loadBook = async (bookId) => {
      const {data} = await getBookById(bookId);
      state.book = data;
      document
          .getElementById("bookCover")
          .setAttribute("onerror", "this.src='default.gif';this.onerror=null");
      // addBookVisit(bookId);
    };

    const loadRecBooks = async (bookId) => {
      const {data} = await listRecBooks({bookId: bookId});
      state.books = data;
    };

    const loadLastChapterAbout = async (bookId) => {
      const {data} = await getLastChapterAbout({bookId: bookId});
      state.chapterAbout = data;
    };

    const bookContent = () => {
      var chapterId ;
      if (state.book.lastChapterId!=null){
        chapterId = state.book.lastChapterId
      }else {
        chapterId = state.book.firstChapterId
      }
      router.push({path: `/book/${state.book.id}/${chapterId}`});
    };

    const bookDetail = (bookId) => {
      router.push({path: `/book/${bookId}`});
      loadBook(bookId);
      loadRecBooks(bookId);
      loadLastChapterAbout(bookId);
      // loadNewestComments(bookId);
    };

    const chapterList = (bookId) => {
      router.push({path: `/book/chapter_list/${bookId}`});
    };

    // const addBookVisit = async (bookId) => {
    //   addVisitCount({bookId: bookId});
    // };

    const loadNewestComments = async (bookId) => {
      const {data} = await listNewestComments({bookId: bookId});
      state.newestComments = data;
    };

    const userComment = async () => {
      if (!state.commentContent) {
        ElMessage.error("用户评论不能为空！");
        return;
      }
      if (state.commentContent.length < 10) {
        ElMessage.error("评论不能少于 10 个字符！");
        return;
      }
      if (state.commentContent.length > 512) {
        ElMessage.error("评论不能多于 512 个字符！");
        return;
      }
      await comment({
        bookId: state.book.id,
        commentContent: state.commentContent,
      });
      state.commentContent = "";
      loadNewestComments(state.book.id);
    };

    const updateUserComment = async (id, comment) => {
      state.dialogUpdateCommentFormVisible = true;
      state.updateComment = comment;
      state.commentId = id;
    };

    const deleteUserComment = async (id) => {
      await deleteComment(id);
      loadNewestComments(state.book.id);
    };

    const goUpdateComment = async (id) => {
      state.dialogUpdateCommentFormVisible = false;
      await updateComment(state.commentId, {content: state.updateComment});
      loadNewestComments(state.book.id);
    };

    return {
      ...toRefs(state),
      author_head,
      no_comment,
      bookContent,
      bookDetail,
      chapterList,
      goToAnchor,
      userComment,
      deleteUserComment,
      man,
      updateUserComment,
      goUpdateComment,
    };
  },
  mounted() {
    $(".icon_show").click(function () {
      $(this).hide();
      $(".icon_hide").show();
      $(".intro_txt").innerHeight("auto");
    });
    $(".icon_hide").click(function () {
      $(this).hide();
      $(".icon_show").show();
      $(".intro_txt").innerHeight("");
    });

    $("#AuthorOtherNovel li").unbind("mouseover");

    $("#txtComment").on("input propertychange", function () {
      var count = $(this).val().length;
      $("#emCommentNum").html(count + "/1000");
      if (count > 1000) {
        $("#txtComment").val($("#txtComment").val().substring(0, 1000));
      }
    });
  },
};
</script>

<style>
.el-button:not(.is-text) {
  border: #f80;
  border-color: #f80;
}

.el-button--primary {
  --el-button-hover-bg-color: #f80;
}

.el-button--primary {
  --el-button-bg-color: #f70;
}

.el-button {
  --el-button-hover-text-color: #fafafa;
}

.el-button {
  --el-button-hover-bg-color: #ff880061;
}
</style>
